<template>
	<view :style="myStyle">
		<view class="">
			<view class="imgflex">
				<view v-if="!isone" class="img" v-for="(item,index) in imgList" :key="index"
					@click.stop="previewImage(index)"
					:style="{width:uupWith+'rpx',height:uupHeight+'rpx',borderRadius:uupBradius+'rpx'}">
					<image :style="{width:uupWith+'rpx',height:uupHeight+'rpx',borderRadius:uupBradius+'rpx'}"
						:src="item.url" mode="aspectFit"></image>
					<uni-icons @click.native.stop="remove(index)" v-if="maxCount>1" class="icon" size='22'
						type="clear"></uni-icons>
					<image v-if="whyupload && maxCount==1" @click.stop="upload" class="ads" src="/static/ads.png"
						mode=""></image>
				</view>
				<view v-if="imgList.length !=maxCount || imgList.length==0 || isone" class="upload" @click="upload"
					:style="{width:uupWith+'rpx',height:uupHeight+'rpx',borderRadius:uupBradius+'rpx'}">
					<view v-if="isupload" class="" style="text-align: center;">
						<uni-icons class="rotate" type="spinner-cycle" size="40" color="#D7D7DB"></uni-icons>
						<view class="" style="font-size: 24rpx;color: #D7D7DB;">上传中</view>
					</view>
					<image v-else class="uimg" src="/static/upload.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			whyupload: {
				type: Boolean,
				default: true
			},
			//改变文字
			uptext: {
				type: String,
				default: "上传图片",
			},
			upWith: {
				type: Number,
				default: 200,
			},
			upHeight: {
				type: Number,
				default: 200,
			},
			upBradius: {
				type: Number,
				default: 8,
			},
			imgList: {
				type: Array,
				default () {
					return [];
				}
			},
			maxCount: {
				type: Number,
				default: 9
			},
		},
		name: "imageUpload",
		data() {
			return {
				uupWith: this.upWith,
				uupHeight: this.upHeight,
				uupBradius: this.upBradius,
				isupload: false,
				isone: false,
			};
		},
		methods: {
			previewImage(index) {
				if (this.imgList.length == 0) {
					return
				}
				let plist = this.imgList.map(item => {
					return item.url
				})
				uni.previewImage({
					current:index,
					urls:plist,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			upload() {
				let that = this
				uni.chooseImage({
					count: that.maxCount,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						if (that.imgList.length == that.maxCount) {
							that.isone = true
						}
						//拿到上传数组 循环上传
						let uploadList = chooseImageRes.tempFilePaths
						uploadList.forEach(item => {
							that.isupload = true
							uni.uploadFile({
								url: 'https://xcx.txcgl.cn/app/communal/uploadImageVideo', // 后台上传接口
								filePath: tempFilePaths[0], // 上传图片 url
								name: 'file',
								formData:{type:"feedback"},
								header: {
									'Content-Type': 'multipart/form-data',
									'Authorization': uni.getStorageSync('sjtoken')
								},
								success(res) {
									let img = JSON.parse(res.data)
									let url = that.$http + img.data.path
									console.log(url);
									if (that.imgList.length >= that.maxCount) {
										that.imgList[0].url = url
										that.imgList[0].path = img.data.path
									} else {
										that.imgList.push({
											url: url,
											path:img.data.path
										})
									}
									that.isupload = false
									that.isone = false
									that.reUpload()
								}
							});
						})

					}
				});
			},
			remove(index) {
				this.imgList.splice(index, 1);
				this.reUpload()
			},
			// 返回数据更新数组
			reUpload() {
				this.$emit('change', this.imgList)
			},
		}
	}
</script>

<style lang="scss">
	@keyframes rotates {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.rotate {
		display: block;
		animation: rotates 2s linear infinite;
	}

	.imgflex {
		display: flex;
		flex-wrap: wrap;

		.img {
			position: relative;
			margin-right: 10rpx;
			margin-bottom: 10rpx;

			.icon {
				position: absolute;
				top: 0%;
				right: 0%;
			}

			.ads {
				position: absolute;
				width: 60rpx;
				height: 60rpx;
				bottom: 0%;
				right: 0%;
			}
		}

	}

	.upload {
		background: #F6F6F6;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;

		.uimg {
			width: 77rpx;
			height: 80rpx;
		}
	}
</style>